<template>
	<view>
		<view class="login">
			<view class="imageview fl-c">
				<!-- <image src="/static/image//my/loginbg.png" class="images"></image> -->
			</view>
			<view style="color: #030303;padding: 30rpx 40rpx;font-size: 46rpx;font-weight: bold; ">
				密码登录
			</view>
			<view class="content fl-c-c">
				<view class="inuts">
					<input class="inputcss" :adjustPosition='false' v-model="username" placeholder="请输入账号"
						@input="bindUserIDInput" />
				</view>
				<view class="fl-c inuts">
					<view style="width: 90%">
						<input class="inputcss" :adjustPosition='false' v-model="password" :password="pashow"
							placeholder="请输入密码" />
					</view>
					<view style="width: 10%; text-align: center">
						<u-icon :name="tubiao" size="36rpx" @click="tubiaoclick"></u-icon>
					</view>
				</view>

			</view>
			<view class="xieyi">
				<checkbox-group @change="checkedbox">
					<label>
						<checkbox value="cb" :checked="checked" />
						<text style="font-size: 24rpx;font-weight: 400;color:rgba(0, 0, 0, 0.50)">我已阅读并同意
						</text>
					</label>
					<text style="color: #3476FE ;font-size: 24rpx;font-weight: 400;"
						@click="yonghuxieyi">《用户服务协议》</text>
					<text style=" ;font-size: 24rpx;font-weight: 400;color:rgba(0, 0, 0, 0.50)">和</text>
					<text style="color: #3476FE ;font-size: 24rpx;font-weight: 400;" @click="yinsizhengce">《隐私政策》</text>
				</checkbox-group>
			</view>
			<view style="padding: 40rpx">
				<view style="margin-top: 40rpx">
					<view class="denlu_button logins" @click="login">登录</view>
				</view>

				<view style="margin-top: 20rpx">
					<view class="denlu_button zhuc" @click="register">注册</view>
				</view>

				<view class="fl-lr-c" style="margin-top: 44rpx">
					<text style="color: #000000; font-size: 28rpx" @click="smslogin">验证码登录</text>
					<text style="color: #000000; font-size: 28rpx" @click="Forgotpassword">忘记密码？</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setTokenStorage
	} from "../../utils/token";
	const {
		getTokenStorage
	} = require("../../utils/token.js");



	const app = getApp();

	// import baseHead from '@/pages/components/baseHead.vue'
	export default {
		data() {
			return {
				tubiao: "eye-off",
				pashow: true,
				title: "登录",
				username: "",
				password: "",
				userID: "",
				code: "",
				sessionID: "",
				second: 60,
				path: "",
				checked: false,
				xuanzhong: '', //是否选中
			};
		},
		watch: {},
		//子组件
		components: {
			// baseHead
		},
		// 计算属性
		computed: {},
		// 监听页面初始化
		onInit() {},
		// 监听页面加载，其参数为上个页面传递的数据
		onLoad(option) {
			const that = this;
			this.setData({
				path: option.path,
			});
			uni.getStorage({
				// 获取本地缓存
				key: "sessionID",
				success(res) {
					that.setData({
						sessionID: res.data,
					});
				},
			});
		},
		//  启动，从后台进入前台显示  或从后一个跳转到前一个页面
		onShow() {},
		// 监听页面初次渲染完成
		onReady() {},
		// 监听页面隐藏
		onHide() {},
		// 监听页面卸载
		onUnload() {},
		// 创建完成立即调用
		created() {},
		// 监听窗口尺寸变化
		onResize() {},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},
		// 页面滚动到底部的事件
		onReachBottom() {},
		// 点击 tab 时触发，参数为Object
		onTabItemTap() {},
		// 计算方法
		methods: {
			tubiaoclick() {
				if (this.pashow) {
					this.tubiao = "eye";
				} else {
					this.tubiao = "eye-off";
				}
				this.pashow = !this.pashow;
			},

			// 输入userID
			bindUserIDInput(e) {
				const val = e.detail.value;
				this.setData({
					userID: val,
				});
			},

			smslogin() {
				uni.navigateTo({
					url: "/pages/Login/codelogin",
				});
			},
			Forgotpassword() {
				uni.navigateTo({
					url: "/pages/Login/forgetYourPassword",
				});
			},
			register() {
				uni.navigateTo({
					url: "/pages/Login/register",
				});
			},
			changes(e) {
				console.log(e);
				this.isRememberPwd = e;
				console.log(this.isRememberPwd.length);
			},

			login() {
				let that = this;
				if (this.path && this.path !== "undefined") {
					uni.redirectTo({
						url: this.path,
					});
				} else {

					if (!this.username.length) {
						this.$util.toast("请输入账号");
						return;
					}

					if (!this.password.length) {
						this.$util.toast("请输入密码");
						return;
					}
					if (!this.xuanzhong) {
						this.$util.toast("请勾选用户服务协议");
						return
					}
					this.$util.HrcLogin(this.username, this.password);

				}
			},
			checkedbox(e) {
				console.log(e);
				this.xuanzhong = e.detail.value[0]
			},
			yonghuxieyi() {
				uni.navigateTo({
					url: '/pages/views/packageB/type-jobhunting/PrivacyAndRules/yinsishuoming/fuwuxieyi'
				})
			},
			yinsizhengce() {
				uni.navigateTo({
					url: '/pages/views/packageB/type-jobhunting/PrivacyAndRules/yinsishuoming/yinsizhengce'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss" scoped>
	/deep/ .uni-checkbox-input {
		border-radius: 50% !important;
		width: 36rpx;
		height: 36rpx;
	}

	.login {
		height: 100vh;
		width: 100%;
		background-image: url("/static/image/my/loginbg.png");
		background-repeat: no-repeat;
		background-size: cover;
		// overflow: hidden;
		// box-sizing: border-box;

		.imageview {
			// margin-top: 50rpx;
			height: 172rpx;
			background-repeat: no-repeat;
			background-size: cover;

			.images {
				height: 209rpx;
				width: 128rpx;

			}
		}

		.content {
			padding: 20rpx 30rpx;
			width: 100%;
			box-sizing: border-box;

			.inuts {
				// border: 0px solid #bfbaba;
				border-bottom: 1px solid #EBEFF4;

				border-radius: 10rpx;
				margin-top: 20rpx;
				background-color: #ffffff;
				width: 100%;
				padding: 27rpx 17rpx;
				box-sizing: border-box;

				.inputcss {
					width: 100%;
					color: #000;
					flex: 1;
					box-sizing: border-box;
				}
			}

			.uni-input-placeholder {
				font-size: 28rpx;
				color: #b2b2b2;
			}
		}

		.xieyi {
			padding: 20rpx 40rpx;
		}
	}

	.groupcss {
		padding: 20rpx;
	}

	// 登录 button
	.denlu_button {
		border: 0px solid #bfbaba;
		height: 90rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logins {
		color: #ffffff;
		background: linear-gradient(64deg, #008efe 0%, #2d5dff 100%);
	}

	.zhuc {
		color: #2c5eff;
		background: #eaeeff;
	}

	.tui-text {
		margin-left: 20rpx;
		color: #c3c4c5;
	}

	// /deep/.tui-checkbox__input {
	// 	background-color: #ffffff00 !important;
	// 	border: 1rpx solid #d6d6d6 !important;
	// 	border-radius: 10rpx !important;
	// }
</style>